<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码生成器</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body style="height:100vh;
padding-top: 30px;background: url('/bg.jpeg');
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;">
<div id="app">
    <el-row>
        <el-col :span="6">..</el-col>
        <el-col :span="12">
            <el-card class="box-card">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item>
                        <h1>代码生成</h1>
                    </el-form-item>
                    <el-form-item label="代码路径：">
                        <el-input v-model="form.projectLocation"></el-input>
                    </el-form-item>
                    <el-form-item label="名包：">
                        <el-input v-model="form.packageName"></el-input>
                    </el-form-item>
                    <el-form-item label="开发者：">
                        <el-select v-model="form.developer" placeholder="开发者">
                            <el-option
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                    v-for="item in devNames">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据库选择：">
                        <el-select v-model="form.dbId" placeholder="请选择">
                            <el-option
                                    v-for="(item,index) in tableData"
                                    :key="index"
                                    :label="item.db"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="表">
                        <el-table
                                ref="multipleTable"
                                :data="tableData[form.dbId].list"
                                tooltip-effect="dark"
                                style="width: 100%"
                                height="250"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="tableName"
                                    label="数据表"
                                    width="300">
                            </el-table-column>
                            <el-table-column
                                    prop="tableComment"
                                    label="实体名称"
                                    show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="6">..</el-col>
    </el-row>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "",
            test: "测试",
            form: {
                projectLocation: '',
                developer: '',
                packageName: 'com.taisau.xiaoyeoo',
                entityNames: [],
                tableNames: [],
                dbId: 0,
                dbName: '',
            },
            tableData: [
                {
                    list: []
                }
            ],
            multipleSelection: [],
            devNames: []
        },

        methods: {
            ajaxFn(method, url, data, cb) {
                $.ajax({
                    type: method,
                    url: url,
                    data: data,
                    // async: false,
                    // dataType : 'text',
                    contentType: "application/json;charset=UTF-8",
                    error: function (request) {
                        alert("当前网络不稳定,请再次点击提交");
                    },
                    success: function (res) {
                        cb(res);
                    }
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getList: function () {
                var _this = this;
                this.ajaxFn('GET', this.url + '/generator/env', '', function (res) {
                    if (res.code === 0) {
                        _this.tableData = res.data.tables;
                        _this.form.projectLocation = res.data.params.projectLocation;
                        _this.devNames = res.data.params.devNames;
                        _this.form.developer = _this.devNames[0]
                    } else {
                        _this.$message({message: res.msg, type: 'warning'});
                    }
                })

            },
            empty() {
                this.form.entityNames.length = 0;
                this.form.tableNames.length = 0;
            },
            onSubmit() {
                if (this.form.projectLocation == null || this.form.projectLocation === '' || this.multipleSelection.length === 0) {
                    this.$message({message: '请填写代码路径', type: 'warning'});
                    return
                }
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    this.form.entityNames.push(this.multipleSelection[i].tableComment)
                    this.form.tableNames.push(this.multipleSelection[i].tableName)
                }
                this.form.dbName = this.tableData[this.form.dbId].db
                var _this = this,
                    params = _this.form;
                this.ajaxFn('POST', this.url + '/generator/generate', JSON.stringify(params), function (res) {
                    _this.empty();
                    if (res.code === 0) {
                        _this.$message({message: res.msg, type: 'success'});
                    } else {

                        _this.$message({message: res.msg, type: 'warning'});
                    }
                })
            }
        },
        mounted: function () {
            this.getList()
        }
    })
</script>
</body>
</html>